<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子礼金系统 - 管理后台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .sidebar {
            transition: transform 0.3s ease;
        }
        .sidebar.collapsed {
            transform: translateX(-100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="flex h-screen">
        <!-- 侧边栏 -->
        <div id="sidebar" class="sidebar w-64 bg-white shadow-lg z-10">
            <div class="p-6 border-b">
                <h1 class="text-xl font-bold text-gray-800">管理后台</h1>
                <p class="text-sm text-gray-600">电子礼金SaaS系统</p>
            </div>
            
            <nav class="mt-6">
                <div class="px-6 py-2">
                    <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">主要功能</h3>
                </div>
                
                <a href="#" class="nav-item active flex items-center px-6 py-3 text-gray-700 hover:bg-gray-100" data-section="dashboard">
                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5a2 2 0 012-2h4a2 2 0 012 2v6H8V5z"></path>
                    </svg>
                    仪表盘
                </a>
                
                <a href="#" class="nav-item flex items-center px-6 py-3 text-gray-700 hover:bg-gray-100" data-section="gifts">
                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                    </svg>
                    礼金管理
                </a>
                
                <a href="#" class="nav-item flex items-center px-6 py-3 text-gray-700 hover:bg-gray-100" data-section="print">
                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path>
                    </svg>
                    打印服务
                </a>
                
                <a href="#" class="nav-item flex items-center px-6 py-3 text-gray-700 hover:bg-gray-100" data-section="screen">
                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                    </svg>
                    大屏功能
                </a>
                
                <a href="#" class="nav-item flex items-center px-6 py-3 text-gray-700 hover:bg-gray-100" data-section="rental">
                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                    </svg>
                    设备租赁
                </a>
                
                <a href="#" class="nav-item flex items-center px-6 py-3 text-gray-700 hover:bg-gray-100" data-section="promotion">
                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                    </svg>
                    推广佣金
                </a>
                
                <a href="#" class="nav-item flex items-center px-6 py-3 text-gray-700 hover:bg-gray-100" data-section="settings">
                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                    系统设置
                </a>
            </nav>
        </div>

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部导航 -->
            <header class="bg-white shadow-sm border-b px-6 py-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <button id="sidebar-toggle" class="mr-4 text-gray-600 hover:text-gray-800">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                            </svg>
                        </button>
                        <h2 id="page-title" class="text-xl font-semibold text-gray-800">仪表盘</h2>
                    </div>
                    
                    <div class="flex items-center space-x-4">
                        <div class="text-sm text-gray-600">
                            管理员
                        </div>
                        <button id="logout-btn" class="text-red-600 hover:text-red-800 text-sm">
                            退出登录
                        </button>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <main class="flex-1 overflow-y-auto p-6">
                <!-- 仪表盘 -->
                <div id="dashboard-section" class="section">
                    <!-- 统计卡片 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                        <div class="bg-white rounded-lg p-6 card-hover">
                            <div class="flex items-center">
                                <div class="p-3 rounded-full bg-blue-100 text-blue-600">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                                    </svg>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">今日订单</p>
                                    <p id="today-orders" class="text-2xl font-semibold text-gray-900">0</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg p-6 card-hover">
                            <div class="flex items-center">
                                <div class="p-3 rounded-full bg-green-100 text-green-600">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                                    </svg>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">本月营收</p>
                                    <p id="month-revenue" class="text-2xl font-semibold text-gray-900">¥0</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg p-6 card-hover">
                            <div class="flex items-center">
                                <div class="p-3 rounded-full bg-purple-100 text-purple-600">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                    </svg>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">活跃用户</p>
                                    <p id="active-users" class="text-2xl font-semibold text-gray-900">0</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg p-6 card-hover">
                            <div class="flex items-center">
                                <div class="p-3 rounded-full bg-orange-100 text-orange-600">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                                    </svg>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">推广员</p>
                                    <p id="promoters" class="text-2xl font-semibold text-gray-900">0</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 图表区域 -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                        <div class="bg-white rounded-lg p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">营收趋势</h3>
                            <canvas id="revenue-chart" width="400" height="200"></canvas>
                        </div>
                        
                        <div class="bg-white rounded-lg p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">订单统计</h3>
                            <canvas id="orders-chart" width="400" height="200"></canvas>
                        </div>
                    </div>

                    <!-- 实时动态 -->
                    <div class="bg-white rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">实时动态</h3>
                        <div id="realtime-activities" class="space-y-3">
                            <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                                <div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
                                <div class="flex-1">
                                    <p class="text-sm text-gray-800">系统启动完成</p>
                                    <p class="text-xs text-gray-500">刚刚</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 礼金管理 -->
                <div id="gifts-section" class="section hidden">
                    <div class="bg-white rounded-lg p-6">
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-lg font-semibold text-gray-800">礼金记录管理</h3>
                            <div class="flex space-x-3">
                                <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                                    导出Excel
                                </button>
                                <button class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
                                    批量操作
                                </button>
                            </div>
                        </div>
                        
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">活动</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">支付方式</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                    </tr>
                                </thead>
                                <tbody id="gifts-table-body" class="bg-white divide-y divide-gray-200">
                                    <tr>
                                        <td colspan="6" class="px-6 py-4 text-center text-gray-500">暂无数据</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- 打印服务 -->
                <div id="print-section" class="section hidden">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div class="bg-white rounded-lg p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">打印订单</h3>
                            <div class="space-y-3">
                                <div class="p-4 border border-gray-200 rounded-lg">
                                    <div class="flex justify-between items-start mb-2">
                                        <h4 class="font-medium text-gray-800">张三李四婚礼</h4>
                                        <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">待支付</span>
                                    </div>
                                    <p class="text-sm text-gray-600">订单号: PB202401001</p>
                                    <p class="text-sm text-gray-600">金额: ¥299</p>
                                    <p class="text-sm text-gray-600">时间: 2024-01-15 14:30</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">礼簿模板</h3>
                            <div class="grid grid-cols-2 gap-4">
                                <div class="border border-gray-200 rounded-lg p-4 text-center">
                                    <div class="w-full h-24 bg-red-100 rounded mb-2"></div>
                                    <h4 class="font-medium text-sm">中式传统</h4>
                                    <p class="text-xs text-gray-600">¥99</p>
                                </div>
                                <div class="border border-gray-200 rounded-lg p-4 text-center">
                                    <div class="w-full h-24 bg-blue-100 rounded mb-2"></div>
                                    <h4 class="font-medium text-sm">西式简约</h4>
                                    <p class="text-xs text-gray-600">¥99</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 大屏功能 -->
                <div id="screen-section" class="section hidden">
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                        <div class="bg-white rounded-lg p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">功能套餐</h3>
                            <div class="space-y-4">
                                <div class="border border-gray-200 rounded-lg p-4">
                                    <h4 class="font-medium text-gray-800">免费版</h4>
                                    <p class="text-sm text-gray-600 mb-2">基础礼金记录</p>
                                    <p class="text-lg font-bold text-green-600">¥0/月</p>
                                </div>
                                <div class="border border-gray-200 rounded-lg p-4">
                                    <h4 class="font-medium text-gray-800">标准版</h4>
                                    <p class="text-sm text-gray-600 mb-2">礼金记录 + 打印服务</p>
                                    <p class="text-lg font-bold text-blue-600">¥99/月</p>
                                </div>
                                <div class="border border-gray-200 rounded-lg p-4">
                                    <h4 class="font-medium text-gray-800">高级版</h4>
                                    <p class="text-sm text-gray-600 mb-2">全功能 + 抽奖互动</p>
                                    <p class="text-lg font-bold text-purple-600">¥299/月</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">用户订购</h3>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                                    <div>
                                        <p class="font-medium text-gray-800">张三</p>
                                        <p class="text-sm text-gray-600">标准版</p>
                                    </div>
                                    <span class="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">活跃</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">大屏模板</h3>
                            <div class="grid grid-cols-2 gap-3">
                                <div class="border border-gray-200 rounded-lg p-3 text-center">
                                    <div class="w-full h-16 bg-red-100 rounded mb-2"></div>
                                    <p class="text-xs text-gray-600">婚礼主题</p>
                                </div>
                                <div class="border border-gray-200 rounded-lg p-3 text-center">
                                    <div class="w-full h-16 bg-blue-100 rounded mb-2"></div>
                                    <p class="text-xs text-gray-600">寿宴主题</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 设备租赁 -->
                <div id="rental-section" class="section hidden">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div class="bg-white rounded-lg p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">设备库存</h3>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center p-3 border border-gray-200 rounded-lg">
                                    <div>
                                        <h4 class="font-medium text-gray-800">55寸大屏</h4>
                                        <p class="text-sm text-gray-600">¥200/天</p>
                                    </div>
                                    <span class="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">可用</span>
                                </div>
                                <div class="flex justify-between items-center p-3 border border-gray-200 rounded-lg">
                                    <div>
                                        <h4 class="font-medium text-gray-800">投影仪</h4>
                                        <p class="text-sm text-gray-600">¥150/天</p>
                                    </div>
                                    <span class="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">可用</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">租赁订单</h3>
                            <div class="space-y-3">
                                <div class="p-3 border border-gray-200 rounded-lg">
                                    <div class="flex justify-between items-start mb-2">
                                        <h4 class="font-medium text-gray-800">李四婚礼</h4>
                                        <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">待审核</span>
                                    </div>
                                    <p class="text-sm text-gray-600">设备: 55寸大屏</p>
                                    <p class="text-sm text-gray-600">租期: 2024-01-20 至 2024-01-21</p>
                                    <p class="text-sm text-gray-600">金额: ¥400</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 推广佣金 -->
                <div id="promotion-section" class="section hidden">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div class="bg-white rounded-lg p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">推广员管理</h3>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                                    <div>
                                        <p class="font-medium text-gray-800">王五</p>
                                        <p class="text-sm text-gray-600">等级: 1级</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-sm text-gray-600">佣金率: 10%</p>
                                        <span class="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">活跃</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">佣金记录</h3>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center p-3 border border-gray-200 rounded-lg">
                                    <div>
                                        <p class="font-medium text-gray-800">王五</p>
                                        <p class="text-sm text-gray-600">推广订单: PB202401001</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="font-medium text-green-600">¥29.9</p>
                                        <p class="text-xs text-gray-600">2024-01-15</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 系统设置 -->
                <div id="settings-section" class="section hidden">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div class="bg-white rounded-lg p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">系统配置</h3>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">客服电话</label>
                                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg" value="400-123-4567">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">系统公告</label>
                                    <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg" rows="3" placeholder="输入系统公告内容"></textarea>
                                </div>
                                <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                                    保存配置
                                </button>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg p-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">财务对账</h3>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                                    <div>
                                        <p class="font-medium text-gray-800">微信支付</p>
                                        <p class="text-sm text-gray-600">今日收入</p>
                                    </div>
                                    <p class="font-medium text-green-600">¥1,250.00</p>
                                </div>
                                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                                    <div>
                                        <p class="font-medium text-gray-800">支付宝</p>
                                        <p class="text-sm text-gray-600">今日收入</p>
                                    </div>
                                    <p class="font-medium text-blue-600">¥850.00</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        // 全局变量
        let charts = {};

        // 工具函数
        function showMessage(message, type = 'info') {
            const colors = {
                success: 'bg-green-500',
                error: 'bg-red-500',
                info: 'bg-blue-500'
            };
            
            const messageEl = document.createElement('div');
            messageEl.className = `fixed top-4 right-4 ${colors[type]} text-white px-6 py-3 rounded-lg shadow-lg z-50`;
            messageEl.textContent = message;
            document.body.appendChild(messageEl);
            
            setTimeout(() => {
                messageEl.remove();
            }, 3000);
        }

        // API调用函数
        async function apiCall(endpoint, options = {}) {
            const token = localStorage.getItem('admin_token');
            const config = {
                headers: {
                    'Content-Type': 'application/json',
                    ...(token && { 'Authorization': `Bearer ${token}` })
                },
                ...options
            };

            try {
                const response = await fetch('/api' + endpoint, config);
                const data = await response.json();
                
                if (!response.ok) {
                    throw new Error(data.error || '请求失败');
                }
                
                return data;
            } catch (error) {
                console.error('API调用失败:', error);
                throw error;
            }
        }

        // 导航切换
        function switchSection(sectionName) {
            // 隐藏所有section
            document.querySelectorAll('.section').forEach(section => {
                section.classList.add('hidden');
            });
            
            // 移除所有nav-item的active类
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });
            
            // 显示目标section
            document.getElementById(sectionName + '-section').classList.remove('hidden');
            
            // 添加active类到当前nav-item
            document.querySelector(`[data-section="${sectionName}"]`).classList.add('active');
            
            // 更新页面标题
            const titles = {
                dashboard: '仪表盘',
                gifts: '礼金管理',
                print: '打印服务',
                screen: '大屏功能',
                rental: '设备租赁',
                promotion: '推广佣金',
                settings: '系统设置'
            };
            document.getElementById('page-title').textContent = titles[sectionName];
            
            // 加载对应数据
            loadSectionData(sectionName);
        }

        // 加载section数据
        async function loadSectionData(sectionName) {
            switch(sectionName) {
                case 'dashboard':
                    await loadDashboardData();
                    break;
                case 'gifts':
                    await loadGiftsData();
                    break;
                // 其他section的数据加载...
            }
        }

        // 加载仪表盘数据
        async function loadDashboardData() {
            try {
                const data = await apiCall('/admin/dashboard');
                
                document.getElementById('today-orders').textContent = data.todayOrders;
                document.getElementById('month-revenue').textContent = '¥' + data.monthRevenue.toFixed(2);
                document.getElementById('active-users').textContent = data.activeUsers;
                document.getElementById('promoters').textContent = data.promoters;
                
                // 初始化图表
                initCharts();
            } catch (error) {
                showMessage('加载仪表盘数据失败', 'error');
            }
        }

        // 初始化图表
        function initCharts() {
            // 营收趋势图
            const revenueCtx = document.getElementById('revenue-chart').getContext('2d');
            if (charts.revenue) charts.revenue.destroy();
            
            charts.revenue = new Chart(revenueCtx, {
                type: 'line',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    datasets: [{
                        label: '营收(元)',
                        data: [12000, 19000, 15000, 25000, 22000, 30000],
                        borderColor: 'rgb(59, 130, 246)',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // 订单统计图
            const ordersCtx = document.getElementById('orders-chart').getContext('2d');
            if (charts.orders) charts.orders.destroy();
            
            charts.orders = new Chart(ordersCtx, {
                type: 'doughnut',
                data: {
                    labels: ['打印服务', '大屏功能', '设备租赁'],
                    datasets: [{
                        data: [40, 35, 25],
                        backgroundColor: [
                            'rgb(34, 197, 94)',
                            'rgb(59, 130, 246)',
                            'rgb(168, 85, 247)'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });
        }

        // 加载礼金数据
        async function loadGiftsData() {
            try {
                // 这里应该调用实际的API
                const gifts = [
                    {
                        event: '张三李四婚礼',
                        name: '王五',
                        amount: 500,
                        payment_method: '微信',
                        created_at: '2024-01-15 14:30:00'
                    }
                ];
                
                renderGiftsTable(gifts);
            } catch (error) {
                showMessage('加载礼金数据失败', 'error');
            }
        }

        // 渲染礼金表格
        function renderGiftsTable(gifts) {
            const tbody = document.getElementById('gifts-table-body');
            
            if (gifts.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" class="px-6 py-4 text-center text-gray-500">暂无数据</td></tr>';
                return;
            }
            
            tbody.innerHTML = gifts.map(gift => `
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${gift.event}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${gift.name}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥${gift.amount}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${gift.payment_method}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${gift.created_at}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <button class="text-blue-600 hover:text-blue-900 mr-3">查看</button>
                        <button class="text-red-600 hover:text-red-900">删除</button>
                    </td>
                </tr>
            `).join('');
        }

        // 侧边栏切换
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('collapsed');
        }

        // 退出登录
        function logout() {
            localStorage.removeItem('admin_token');
            window.location.href = '/admin/login.html';
        }

        // 事件监听器
        document.addEventListener('DOMContentLoaded', function() {
            // 检查管理员登录状态
            const token = localStorage.getItem('admin_token');
            if (!token) {
                window.location.href = '/admin/login.html';
                return;
            }

            // 导航点击事件
            document.querySelectorAll('.nav-item').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    const section = this.getAttribute('data-section');
                    switchSection(section);
                });
            });

            // 侧边栏切换
            document.getElementById('sidebar-toggle').addEventListener('click', toggleSidebar);

            // 退出登录
            document.getElementById('logout-btn').addEventListener('click', logout);

            // 默认加载仪表盘
            loadDashboardData();
        });
    </script>
</body>
</html>
